<template>
  <div class="group">
    <ul class="flex flex-col gap-4">
      <li
        v-for="(item, key) in options"
        :key="key"
        class="p-4"
        @click="selectItem(item)"
        :class="{ active: selectKeys.includes(`${item.value}`) }"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { fetchLabelOptions } from '@/api/modules/lcd/lcd-device';
import type { LabeledValue } from 'ant-design-vue/es/select';

const modelValue = defineModel<string[]>('modelValue');
const selectKeys = ref<string[]>([]);
const options = ref<LabeledValue[]>([]);

const selectItem = (item: LabeledValue) => {
  let v = `${item.value}`;
  if (selectKeys.value.includes(v)) {
    selectKeys.value = selectKeys.value.filter(i => i !== v);
  } else {
    selectKeys.value.push(v);
  }

  modelValue.value = selectKeys.value;
};
onMounted(async () => {
  if (options.value.length === 0) {
    const { data } = await fetchLabelOptions(true);
    options.value = data.data;
  }
});
</script>

<style lang="scss" scoped>
.active {
  background: var(--primary);
  color: white;
}
ul {
  li {
    cursor: pointer;
    border-radius: var(--radius);
  }
}
</style>
